<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品详情</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/goods.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="lt" onclick="javascript:history.go(-1)">&lt;</div>
      <div class="ct">商品详情</div>
      <div class="rt"></div>
    </div>
    <!-- 轮播图 -->
    <div class="goodsimgs" >
      <img src="./static/demo/idx-banner.jpg" background-size="cover"/>
    </div>
    <!-- 小标签 -->
    <div class="service-policy">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info">
      <div class="c">
        <span class="name">商品名称</span>
        <span class="desc">商品小描述</span>
        <span class="price">￥ 商品价格</span>
        <div class="brand">
          <a href="./brandDetail.html">
            <span>品牌名称</span>
          </a>
        </div>
      </div>
    </div>
    <div class="section-nav section-attr">
      <div class="t">请选择规格数量</div>
      <img class="i" src="./static/images/address_right.png" background-size="cover"/>
    </div>
    <!---评论信息-->
    <div class="comments">
      <div class="h">
        <a href="./comment.html">
          <span class="t">评价(11)</span>
          <span class="i">查看全部</span>
        </a>
      </div>
      <div class="b">
        <div class="item">
          <div class="info">
            <div class="user">
              <img src="./static/demo/idx-brand.jpg"/>
              <span>昵称</span>
            </div>
            <div class="time">2021-11-22</div>
          </div>
          <div class="content">
            这是评论正文内容这是评论正文内容这是评论正文内容
          </div>
          <div class="imgs">
            <img class="img" src="./static/demo/idx-brand.jpg"/>
            <img class="img" src="./static/demo/idx-brand.jpg"/>
            <img class="img" src="./static/demo/idx-brand.jpg"/>
          </div>
          <!-- <div class="spec">白色 2件</div> -->
        </div>
        <div class="item">
          <div class="info">
            <div class="user">
              <img src="./static/demo/idx-brand.jpg"/>
              <span>昵称</span>
            </div>
            <div class="time">2021-11-22</div>
          </div>
          <div class="content">
            这是评论正文内容这是评论正文内容这是评论正文内容
          </div>
          <div class="imgs">
            <img class="img" src="./static/demo/idx-brand.jpg"/>
            <img class="img" src="./static/demo/idx-brand.jpg"/>
            <img class="img" src="./static/demo/idx-brand.jpg"/>
          </div>
          <!-- <div class="spec">白色 2件</div> -->
        </div>
      </div>
    </div>
    <div class="goods-attr">
      <div class="t">商品参数</div>
      <div class="l">
        <div class="item">
          <span class="left">规格：</span>
          <span class="right">xxxx</span>
        </div>
        <div class="item">
          <span class="left">规格：</span>
          <span class="right">xxxx</span>
        </div>
        <div class="item">
          <span class="left">规格：</span>
          <span class="right">xxxx</span>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="detail">
      商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情商品详情
    </div>
  
    <!-- 常见问题 -->
    <div class="common-problem">
      <div class="h">
        <div class="line"></div>
        <span class="title">常见问题</span>
      </div>
      <div class="b">
        <div class="item">
          <div class="question-box">
            <span class="spot"></span>
            <span class="question">问题名称</span>
          </div>
          <div class="answer">
            问题回答
          </div>
        </div>
        <div class="item">
          <div class="question-box">
            <span class="spot"></span>
            <span class="question">问题名称</span>
          </div>
          <div class="answer">
            问题回答
          </div>
        </div>
        <div class="item">
          <div class="question-box">
            <span class="spot"></span>
            <span class="question">问题名称</span>
          </div>
          <div class="answer">
            问题回答
          </div>
        </div>
      </div>
    </div>
    <!-- 大家都在看，关联商品 -->
    <div class="related-goods" >
      <div class="h">
        <div class="line"></div>
        <span class="title">大家都在看</span>
      </div>
      <div class="b">
        <div class="item">
          <a href="/pages/goods/goods">
            <img class="img" src="./static/demo/idx-brand.jpg" background-size="cover"/>
            <span class="name">名称</span>
            <span class="price">￥111</span>
          </a>
        </div>
        <div class="item">
          <a href="/pages/goods/goods">
            <img class="img" src="./static/demo/idx-brand.jpg" background-size="cover"/>
            <span class="name">名称</span>
            <span class="price">￥111</span>
          </a>
        </div>
        <div class="item">
          <a href="/pages/goods/goods">
            <img class="img" src="./static/demo/idx-brand.jpg" background-size="cover"/>
            <span class="name">名称</span>
            <span class="price">￥111</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- 商品属性参数弹框 -->
  <div class="attr-pop-box" hidden>
    <div class="attr-pop">
      <div class="close">
        <img class="icon" src="./static/images/icon_close.png"/>
      </div>
      <div class="img-info">
        <img class="img" src="./static/demo/idx-brand.jpg"/>
        <div class="info">
          <div class="c">
            <div class="p">价格：￥111</div>
            <div class="a" >已选择：红色，大</div>
          </div>
        </div>
      </div>
      <div class="spec-con">
        <div class="spec-item" >
          <div class="name">颜色</div>
          <div class="values">
            <div class="value selected">粉红色</div>
            <div class="value">白色</div>
            <div class="value">黑色</div>
          </div>
        </div>
        <div class="spec-item" >
          <div class="name">尺寸</div>
          <div class="values">
            <div class="value selected">大</div>
            <div class="value">中</div>
            <div class="value">小</div>
          </div>
        </div>
  
        <div class="number-item">
          <div class="name">数量</div>
          <div class="selnum">
            <div class="cut">-</div>
            <input value="1" class="number"  type="number" />
            <div class="add" >+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部按钮区域 -->
  <div class="bottom-btn">
    <div class="l l-collect" >
      <img class="icon" src="./static/images/icon_collect.png"/>
      <!-- <img class="icon" src="./static/images/icon_collect_checked.png"/> -->
    </div>
    <div class="l l-cart">
      <div class="box">
        <span class="cart-count">111</span>
        <img  class="icon" src="./static/images/ic_menu_shoping_nor.png"/>
      </div>
    </div>
    <div class="c">立即购买</div>
    <div class="r">加入购物车</div>
  </div>
</body>
<script>
  // 加入购物车逻辑：
    //  首先弹出参数选项遮罩层，进行选择
    //  只有选择好了对应的参数内容，再点击加入购物车才可以实现加入功能。
    //  总结： 第一次点击加入购物车其本质是打开遮罩层，第二次才是加入逻辑
  // TODO：按照真实业务逻辑，重新书写。这里仅做效果展示 
  let btn = document.querySelector('.bottom-btn .r')
  let box = document.querySelector('.attr-pop-box')
  let close = document.querySelector('.attr-pop-box .close')
  let row = document.querySelector('.section-nav.section-attr')
  btn.onclick = function(){
    if(box.getAttribute('hidden')===null){
      alert('加入成功')
    }else{
      box.removeAttribute('hidden')
    }
  }
  row.onclick = function(){
    box.removeAttribute('hidden')
  }
  close.onclick = function(){
    box.setAttribute('hidden',true)
  }
</script>
</html>